<script lang="ts" setup>
import {getVideoDetails} from '~/api/product'
import {wechatPay, queryState} from '~/api/order'
import Wechat from './payPage/Wechat.vue'

// 课程详情数据
const detailsData = reactive((await getVideoDetails(Number(useRoute().query.id) || 1)).data)


// 支付订单号
let outTradeNo = $ref('')

// 定义二维码 DOM id和控制弹窗展开变量
const wechat = reactive({
    id: 'wechatQrcode',
    visible: false
})

// 关闭二维码弹窗
const onCancel = () => {
    wechat.visible = false
    clearInterval(timer)
}

// 立即支付按钮
const getWechatPay = async () => {
    // 请求支付二维码
    const data = await wechatPay({id: (Number(useRoute().query.id) || 1), type: 'PC'})
    // 如果不是客户端时机或者请求不成功就终止
    if (data.code !== 0 || process.server) return

    outTradeNo = data.data.out_trade_no

    // 在客户端渲染时引入插件
    const QRcode = await import('qrcodejs2-fix')

    wechat.visible = true
    // visible改变时候 当前弹窗还没好
    nextTick(() => {
        new QRcode.default('wechatQrcode', {
            width: 160,
            height: 160,
            text: data.data.code_url
        })
    })
}

// 监听支付回调
let timer = $ref(null)
watch(
        () => outTradeNo,
        (val) => {
            // 三秒查询查询一次
            timer = setInterval(async () => {
                const data = await queryState(val)
                if (data.code === 0 && data.data.order_state === 'PAY') {
                    clearInterval(timer)
                    await navigateTo('/')
                }
            }, 3000)
        }
)

useHead({
    title: '小滴课堂 - 商品支付'
})
</script>

<template>
    <div wfull flex="~ col" justify-center items-center>
        <div w-1200px flexc flex-col>
            <div rounded-10px h-300px p="y-20px x-30px" style="box-shadow: 0px 0px 10px 0px #d5d5d5">
                <div w-1200px flex justify-between>
                    <div flex w-full>
                        <cdn-img :src="detailsData.cover_img" w-200px h-135px/>
                        <div flex flex-col justify-center ml-30px>
                            <h2 mb-30px color="#555555" text-24px> {{ detailsData.title }} </h2>
                            <p mb-2 font-600 color="#aaaaaa" text-30px>×1</p>
                        </div>
                    </div>
                    <div mt-10 text-size-lg p0>¥{{ Number(detailsData.amount).toFixed() }}</div>
                </div>
            </div>
        </div>
        <div wfull style="box-shadow: 0px 0px 10px 0px #d7d7d7" h-120px flexc mt-50px>
            <div w-1200px flexb>
                <div relative>
                    <cdn-img src="/images/svg/wechat_pay.svg" border-2 border-orange/>
                    <cdn-img src="/images/pay_active.png" alt="" class="xiabiao"/>
                </div>
                <div flex>
                    <div>
                        <span color="#222222" text-24px>总计支付：</span>
                        <span text-44px color="#ff4439">￥{{ Number(detailsData.amount).toFixed() }}</span>
                    </div>
                    <button bg="#f38e48"
                            class="btn ml-45px mr-20px center-text-64 w-210px rounded-full text-white text-24px"
                            @click="getWechatPay">
                        立即支付
                    </button>
                </div>
            </div>
        </div>
        <Wechat :wechat="wechat" @onCancel="onCancel()"/>
    </div>
</template>

<style lang="less" scoped>
:deep(.ant-card-body) {
    padding: 10px;
}

.xiabiao {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 32px;
}
</style>